<template>
	<view class="trading">
		<van-tabs :ifbuy="true" :active="active" color="#3e527e"  @change="onTabChange">
		  <van-tab title="交易大厅"><tab1 ref="tab1"></tab1></van-tab>
		  <van-tab title="挂买单"><tab2 :price="price" ref="tab2"></tab2></van-tab>
		  <van-tab title="挂卖单"><tab3 :price="price" ref="tab3"></tab3></van-tab>
		</van-tabs>
	</view>
</template>

<script>
import tab1 from './tab/tab1.vue';
import tab2 from './tab/tab2.vue';
import tab3 from './tab/tab3.vue';
export default {
	components: {
		tab1,
		tab2,
		tab3
	},
	data() {
		return {
			active: 0,
			price: 0
		};
	},
	onShow() {
		this.$refs.tab1.getBuyList()
		this.getUnitPrice()
	},
	methods: {
		onTabChange (e) {
			this.active = e.detail.index
			this.$refs['tab'+(e.detail.index+1)].getBuyList()
		},
		getUnitPrice () {
			this.$http.getUnitPrice().then(res => {
				const data = res.data
				uni.stopPullDownRefresh()
				if (data.success) {
					this.price = data.data
					return
				}
				this.price = 0
				uni.showToast({
					title: data.errMsg,
					icon: 'none'
				});
			})
		},
		onPullDownRefresh() {
			this.$refs.tab1.getBuyList()
			this.getUnitPrice()
		}
	},
};
</script>

<style scoped lang="scss">
</style>
